# Why doesn't js file work in Google Chrome? 
#
# Clicking Serial number link will show ticket history:
# http://localhost/rt/webrt.cgi/webrt.cgi?serial_num=94710&display=History
#
# Clicking email link will enable user to reply to ticket requestor:
# http://localhost/rt/webrt.cgi/webrt.cgi?serial_num=94710&refresh_req=true&transaction=0&display=SetReply;
#
# http://localhost/rt/webrt.cgi/webrt.cgi/webrt.cgi?display=SetStatus&serial_num=94690

# Define a selector for choosing different Drop Downs -------------------------------------------
$statusSor = $('''
<select style="display: none">

</select>
''')

statusOptions = $('''
	<option value="open"> open </option>
	<option value="stall"> stalled </option>
	<option value="resolve"> resolved </option>
	<option value="kill" disabled='disabled'> dead </option>
''')

areaOptions = $('''
<option> None </option>
<option>Declined</option>
<option>Inquiries</option>
<option>Interview Requested</option>
<option>Placed - Admin</option>
<option>Placed - CC</option>
<option>Placed - PA</option>
<option>Placed - US/UT</option>
<option>Staff Requests</option>
''')

$editBtn = $('''
<div id='edit' style='position: absolute; display: table; text-align: right; color: RED; margin-top: -2px;'>
	<font style='font-size: 15px;'>
		[Edit]
	</font>
</div>
''')

$subjInput = $('''
<p style="display: none" id="genTextWrap">
	<input type="text" id="genTextArea"/>
	<br />
	<input type="submit" class="saveBtn" value="Save" />
	<input type="submit" class="cancelBtn" value="Cancel">
</p>
''')

# Define some CSS
$pageCSS = '
	<style type="text/css">

		.dropDownCell, .inputTypeCell{
			height: 40px;
			}
			
		.dropDownCell, #edit > font{
			cursor: hand;
			}
			
		#genTextArea{
			width: 100%;
			border: solid 1px gray;
			}
		
		#msgDisplay{
			height: 30px;
			position: absolute;
			text-align: center;
			}
		
		#msgDisplay > font{
			padding-left: 10px;
			padding-right: 10px;
			background-color: #A2CD5A !important;
			font-size: 15px;
			color: #000000;
			}
		
	</style>'


# Define useful CSS objects for debugging navigation
markCSS =
	'border-color': 'transparent'
	'border-style': 'solid'
unmarkCSS = 
	'border-color': 'none' 
	'border-style': 'none'
	
Deep = true

# Define a regex to match a ticket's serial number
serialNum = /serial_num=(\d+)/
rt_link = "/rt/webrt.cgi"

# Control flag that sets condition to displaying forms
ctrlFlag = false
hoverFlag = false

jQuery ($) ->

	# This function will serve a debugger for now because using alert method to quick debug is starting to
	# to get pretty annoying. Eventually this can be rewritten to be a tooltip implementation.
	#

	$(document).on 'scroll ready', ->
		
		$('#msgDisplay').css('top' : window.pageYOffset)
		$('#msgDisplay').css('width' : window.innerWidth)		
		return

	#capture the login page
	$('html').on 'click', 'INPUT[value="Login"]', ->
		$strLogin = 'username='+$('INPUT[name="username"]').attr('value')+
					'&password='+$('INPUT[name="password"]').attr('value')
		$.get rt_link, $strLogin, (data, textStatus, jqXHR) ->
			$('html').html data
			$('font[size="-1"] > table').before("<div id='msgDisplay' style='width: #{window.innerWidth};'>
			<font style='font-size: 14px; display: none;'></font>
			</div>")
			$('#msgDisplay').before('<div id="hiddenWrapper" style="display: none !important;"></div>')
			$('#hiddenWrapper').before($pageCSS)
			$('font >table >tbody >tr').rtTickets();			
		return false
	
	# We will try to get webrt's main page from the server.
	#
    
	# We need to provide a load spinner.
	#
	$.get rt_link, (data, textStatus, jqXHR) ->

		# The data response is an HTML page.
		# We will use it to replace the starting HTML page.
		#
		# >FIXME
		# Result lacks a body tag
		#
		$('html').html data

		$('font[size="-1"] > table').before("<div id='msgDisplay' style='width: #{window.innerWidth};'>
		<font style='font-size: 14px; display: none;'></font>
		</div>")
		$('#msgDisplay').before('<div id="hiddenWrapper" style="display: none !important;"></div>')
		$('#hiddenWrapper').before($pageCSS)
		
		# Every time the user clicks an anchor tag, we need to intercept it and
		# get the href ourself, otherwise, we will lose our Javascript file.
		$('html').on 'click', 'a', ->
			href = $(@).prop 'href'
			$.get href, (data) ->
				$('html').html data
			return false

		#capture the search form
		$('html').on 'click', 'INPUT[value="Update Queue Filters"]', ->
			$qFilters = $('body >form').serialize()
			$.get rt_link, $qFilters, (data, textStatus, jqXHR) ->
				$('html').html data
			return false
      
		#get the event control of button named "Create request in queue"
		$('html').on 'click', 'INPUT[value="Create request in queue"]', ->
			qid = $('form :input[name="queue_id"]').val()
			$.get rt_link, "queue_id=#{ qid }&display=Create_Step2", (data, textStatus, jqXHR) ->
				$('html').html data
			return false
      
		#create a new request
		$('html').on 'click', 'INPUT[value="Create request"]', ->
			$newReq = $('body >center >form').serialize()
			$.get rt_link, $newReq, (data, textStatus, jqXHR) ->
				$('html').html data
			return false

		#get the event of button named "Display request #"
		$('html').on 'click', 'INPUT[value="Display request #"]', ->
			sid = $('form :input[name="serial_num"]').val()
			$.get rt_link, "display=History&serial_num=#{ sid }", (data, textStatus, jqXHR) ->
				$('html').html data
			return false
		
		# The main page will be divided into several tables representing the major sections:
		#
		# * table header showing ticket properties
		# * table body listing tickets
		# * search form
		# * function bar
		# * footer
		#
		# >FIXME
		# Let's give an identifier to the sections, so we will locate them
		# easily.
		$('body >font >table >tbody >tr').prop 'id', 'header'
		$('body >font >table >tbody').prop 'id', 'tickets'
		$('body >form').prop 'id', 'search_form'
		$('body >table').prop 'id', 'function_bar'
		$('body >center').prop 'id', 'footer'

		# The main table will list one ticket per row with a core set of
		# properties, eg, priority, status, subject.  The major interactivity
		# of the main table will be that the user should be able to change the
		# value of an property by clicking it to enter an editing mode.

		# Let's adorn each table row with a class name and a serial number.
		
		$('font >table >tbody >tr').rtTickets();		
		
		return # from get handler

	return
